<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('按钮组风格')}`">{{ $t('按钮组风格') }}</t>
            <li>配置<span class="s-code">groupStyle</span>为<span class="s-code">"button"</span>即可展示为按钮组风格</li>
        </template>
        <sib-item v-model="value" :props="props" @change="change"></sib-item>
    </example>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const value = ref(1);
        const props = reactive({
            type: 'radio',
            groupStyle: 'button',
            options: Array(4).fill().map((_, i) => ({ label: `选项${i}`, value: i })),
        });

        return {
            props,
            value,
            templateString: `<template>
    <sib-item v-model="value" :props="props"></sib-item>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const value = ref(1);
        const props = reactive({
            type: 'radio',
            groupStyle: 'button',
            options: Array(4).fill().map((_, i) => ({ value: i, label: \`选项\${i}\` })),
        });

        return { props, value, selections };
    },
};
<\/script>`,
        };
    },
};
</script>
